@import 'assets/style/global.less';

@TITLE_COLOR_LIGHT: #cecece;
@TITLE_FONT_COLOR_LIGHT: #6c6c6c;
@DISTANCE_TO_BORDER: 1em;
@HOVER_COLOR: #a4a4a4;

.widget-visible {
  opacity: 0;
}

#task-manager-widget-wrapper {
  position: absolute;
  right: 10px;
  top: 60px;
  width: 29em;
  border-radius: 10px;
  height: calc(100vh - 120px);
  background: rgba(@CONTENT_COLOR_C, 90%);
  transition: all ease-in-out 0.15s;
  opacity: 0;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  z-index: 999999;

  .op-bar {
    border-radius: 10px 10px 0 0;
    position: relative;
    top: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background-color: @STRONG_THEME_COLOR_LIGHT;
    display: flex;
    justify-content: space-between;

    .title-wrapper {
      color: white;
      height: 100%;
      position: relative;
      left: @DISTANCE_TO_BORDER;
      padding-top: 0.25em;
      font-size: 1.02em;
    }

    .op-wrapper {
      position: relative;
      right: @DISTANCE_TO_BORDER;
      height: 100%;
      display: flex;
      flex-direction: row;

      .op-item {
        width: 24px;
        height: 24px;
        //padding: 1em;
        margin: 0.2em @DISTANCE_TO_BORDER 0 0.2em;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        transition: all ease-in-out 0.1s;
        cursor: pointer;

        img {
          width: 16px;
          height: 16px;
          //padding: 1px;
        }

        &:hover {
          background: @HOVER_COLOR;
        }
      }
    }
  }

  .main {
    height: calc(100% - 2.5em);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;

    // 滚动条样式重写
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #555;
    }

    .hint {
      margin: 2.5em auto 0 auto;
      font-size: 1rem;
      color: #6c6c6c;
    }

    .task-item-wrapper {
      border: 2px solid @TITLE_COLOR_LIGHT;
      border-radius: 8px;
      margin: 0.4em 1.5em;
      padding: 0.7em;

      &:first-child {
        margin-top: 1.2em !important;
      }

      &:last-child {
        margin-bottom: 3em !important;
      }

      .title {
        font-size: 1.05em;
        display: flex;
        flex-direction: row;

        .type {
          font-family: @GLOBAL_FONT_FAMILY;
          flex: 1;
          font-weight: 600;
          color: @STRONG_THEME_COLOR_LIGHT;
        }

        .timeOrOperation {
          font-family: @GLOBAL_FONT_FAMILY;
          float: right;
          font-size: 0.9em;
          cursor: pointer;
        }

        .time {
          float: right;
          font-size: 0.9em;
        }

        .success {
          color: #019e48;
        }

        .warn {
          color: #e99d42;
        }

        .error {
          color: #ff7272;
        }

        .info {
          color: @STRONG_THEME_COLOR_LIGHT;
        }
      }

      .content {
        font-size: 0.95em;
      }
    }
  }
}
